<!DOCTYPE html>
<html>

<head>
    <title>登录 - ${constants.getSystemName()}</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="${ctxPath}/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/css/login.css?v=${constants.getReleaseVersion()}" media="all">
    <style>
        body {
            /*background-image: url("${ctxPath}/assets/common/images/login-bg3.png");*/
            /*background-position:center center;*/
            /*background-repeat: no-repeat;*/
            /*background-size: cover;*/
            /*background-color: #f0f2f5;*/
        }

        .login-body {
            padding: 0;
            width: 100%;
            position: absolute;
            top:5px;
            left: 0;
            right: 0;
            bottom:0;
            display: flex;
            align-items: center;
        }

        .login-header {
            color: #333333;
            padding: 0;
            border: none;
            height: 80px;
            line-height: 80px;
            /*background-color: #ffffff;*/
            /*background-image: linear-gradient(-90deg, #dedede, transparent);*/
            background: #ffffff;
        }
        .login-header img{
            height: auto;
            padding-left: 30px;
        }
        .login-header span{
            float:right;
            padding-right: 30px;
        }
        .login-body{
            background-image: url("${ctxPath}/assets/common/images/login-bg.png");
            background-position:center center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: #f0f2f5;
        }
        .login-footer {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a:hover {
            color: rgba(0, 0, 0, 0.4) !important;
        }
        /*.login-body {
            width: 400px;
            text-align: center;

            height: 300px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            margin: auto;
        }*/
        .header-text{
            flex: 1;
        }
        .header-text>div:first-of-type{
            background: linear-gradient(to right, red, blue);
            -webkit-background-clip: text;
            color: transparent;
        }
        .layui-input:hover,.layui-input:focus{
            border-color: transparent!important;
        }
        .layui-input{
            border-color: transparent!important;
            background-color: rgb(6,135,205,.3);
            color: #666666;
        }
        .layui-form-pane .layui-form-label{
            border-color:transparent!important;
            /*background-image: url("${ctxPath}/assets/common/images/bg1.png");*/
            background-position:center center;
            background-size: cover;
            background-color: transparent;
            color: #333333;
            min-height:36px;
            height: 100%;
            display: flex;
            justify-content:center;
            align-items: center;
            /*border-top-left-radius: 8px;*/
            /*border-bottom-left-radius: 8px;*/
        }
        ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: #999999;
        }
        ::-moz-placeholder { /* Firefox 19+ */
            color: #999999;
        }
        :-ms-input-placeholder { /* IE 10+ */
            color: #999999;
        }
        :-moz-placeholder { /* Firefox 18- */
            color: #999999;
        }
        .login-body-content{
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            left: 0;
            right:0;
            top:0;
            bottom:0;
            padding-left: 500px;
            /*min-width: 1134px;*/
            /*min-height: 595px;*/
        }
        .layui-card{
            position: relative;
            width: 80%;
            height: 45%;
            max-width: 502px;
            max-height: 390px;
            min-width: 300px;
            min-height: 291px;
            /*border: 2px solid #0c6ab2;*/
            /*background-image: url("${ctxPath}/assets/common/images/bg1.png");*/
            background-position:center center;
            background-size: cover;
            background-color: transparent;
            margin: -120px 0 0 80px;
            /*background-color: #11488e;*/
        }
        .layui-card-header{
            height: 20%;
            font-size: 22px !important;
            color:#ffffff;
            font-weight: 500 !important;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 3%;
        }
        .layui-card-body{
            height: 56%;
            box-sizing: border-box;
            padding: 10px 10%;
        }
        .layui-form-item{
            height: 24%;
            margin-bottom: 7%;
            min-height: 42px;
            background: #ffffff;
            border-radius: 4px;
        }
        .layui-form-item2{
            height: 24%;
            margin-bottom: 7%;
            min-height: 42px;
            border-radius: 4px;
        }

        .layui-input-block{
            height: 100%;
        }
        .layui-input-block>input{
            height: 100%;
            background-image: url("${ctxPath}/assets/common/images/bg1.png");
            background-position:center center;
            background-size: cover;
            background-color: transparent;
        }
        .left-c,.right-c{
            position: absolute;
            top:0;
            bottom:0;
            z-index:10;
        }
        .left-c{
            left: 0;
        }
        .right-c{
            right:0;
        }
        .top-c,.bottom-c{
            position: absolute;
            right:0;
            left: 0;
            z-index:10;
        }
        .top-c{
            top:0;
        }
        .bottom-c{
            bottom:0;
        }
        .left-c>img,.right-c>img{
            opacity: 0.5;
            height: 100%;
        }
        .top-c>img,.bottom-c>img{
            width:100%;
            opacity: 0.5;
        }
        .center-diqiu{
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            z-index: 9;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .center-diqiu img{
            height: 100%;
            /*width: 45%;*/
            min-height: 800px;
        }
        .left-top{
            position: absolute;
            left:0;
            top:0;
            width:45%;
            min-width: 750px;
            z-index: 11;
        }
        .left-top>img{
            width:100%;
            opacity: 0.22;
        }
        .right-bottom{
            position: absolute;
            right:0;
            bottom:0;
            width: 30%;
            z-index: 11;
            min-width: 450px;
        }
        .right-bottom>img{
            width:100%;
            opacity: 0.22;
        }
        .centerbg{
            position: absolute;
            top:0;
            left: 0;
            right:0;
            bottom:0;
            z-index: 12;
            display: flex;
            align-items: center;
        }
        .centerbg>img{
            width: 100%;
            /*min-width: 1039px;*/
            /*min-height: 96px;*/
        }
        .layui-card-lips{
            height: 10%;
            text-align: center;
            color: #ffffff;
        }
        .left-top-s,.left-bottom-s{
            position: absolute;
            left:-2px;
            z-index: 15;
        }
        .left-top-s{
            top:-2px;
        }
        .left-bottom-s{
            bottom:-2px;
        }
        .right-top-s,.right-bottom-s{
            position: absolute;
            right:-2px;
            z-index: 15;
        }
        .right-top-s{
            top:-2px;
        }
        .right-bottom-s{
            bottom:-2px;
        }
        .guangyun-top,.guangyun-bottom{
            position: absolute;
            left: 0;
            right:0;
            z-index: 15;
            display: flex;
            justify-content: center;
        }
        /*.guangyun-top>img,.guangyun-bottom>img{*/
        /*width: 100%;*/
        /*}*/
        .guangyun-top{
            top:-3px;
        }
        .guangyun-bottom{
            bottom:-3px;
        }
        .layui-form-checkbox[lay-skin=primary] span{
            color:#ffffff;
        }
        .layui-form-checked[lay-skin=primary] i{
            border-color: #06b172 !important;
            background-color: #06b172 !important;
            /*border: none;*/
        }
        .login-body .layui-form-pane .layui-form-label{
            width: 40px;
            justify-content: flex-end;
            padding: 8px 0;
        }
        .login-body .layui-form-pane .layui-input-block{
            margin-left: 55px;

        }
    </style>
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
</head>

<body>
<div class="login-wrapper" style="min-width: 1124px;min-height: 768px">

    <div class="login-body" >
        <div class="login-body-content" >
            <div class="layui-card">
                <div class="layui-card-header">
                    用户登录
                </div>
                <div class="layui-card-body layui-form layui-form-pane" lay-filter="loginForm" >
                    <div class="layui-form-item" >
                        <label class="layui-form-label" ><img src="${ctxPath}/assets/common/images/zhanghao.png"></label>

                        <div class="layui-input-block">
                            <input name="username"  id="username" placeholder="请输入用户名 admin" type="text"  lay-verify="required"  style="background: none !important;" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><img src="${ctxPath}/assets/common/images/mima.png"></label>
                        <div class="layui-input-block">
                            <input name="password"  id="password" placeholder="请输入密码 1" type="password"  lay-verify="required"  style="background: none !important;" class="layui-input">
                        </div>
                    </div>
                    @if(constants.getKaptchaOpen()){
                    <div class="layui-form-item2" >

                        <div >
                            <div class="layui-row inline-block" style="text-align: right;width: 100%">
                                <div class="layui-col-xs7" style="background: #FFFFFF;">
                                    <input name="kaptcha" id="kaptcha" type="text" lay-verify="required" placeholder="验证码" class="layui-input">
                                </div>
                                <div class="layui-col-xs5" style="padding-left: 10px;">
                                    <img class="login-captcha" src="${ctxPath}/kaptcha">
                                </div>
                            </div>
                        </div>
                    </div>
                    @}
                </div>
                <div class="layui-form-item" style="height: 20%;padding: 0 10%;box-sizing: border-box;background: none;">
                    <button class="layui-btn layui-btn-fluid" id="submit" style="height: 60%;min-height: 42px; line-height: 60%;background-color:#06b172;font-size: 16px;">登 录</button>
                </div>

            </div>
        </div>

    </div>

</div>
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script>
    layui.use(['layer',  'index', 'ax'], function () {
        var $ = layui.jquery;
        var $ax = layui.ax;
        var layer = layui.layer;
        var index = layui.index;

        // 图形验证码
        $('.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        });

        //错误提醒
        var errorMsg = "${tips!}";
        if (errorMsg) {
            layer.msg(errorMsg, {icon: 5, anim: 6});
        }

        //登录操作
        $('#submit').click(function () {
            var ajax = new $ax(Feng.ctxPath + "/login", function (data) {
                if (data.success||data.success=='true') {
                    Feng.success("登录成功!");
                    index.clearTabCache();
                    window.location.href =  Feng.ctxPath +"/" ;
                }else{
                    layer.msg("登录失败！" + data.message);
                }

            }, function (data) {
                layer.msg("登录失败！" + data.responseJSON.message, {icon: 5, anim: 6});
            });
            ajax.set("username", $("#username").val());
            ajax.set("password", $("#password").val());
            @if(constants.getKaptchaOpen()){
                ajax.set("kaptcha", $("#kaptcha").val());
            @}
            ajax.start();
        });
        //add by liubq
        $("#password").keydown(function (e) {
            if (e.keyCode === 13) {
                $("#submit").trigger("click");
            }
        });

        $('#username').bind("keyup", function (event) {
            if (event.keyCode == 13) {
                $('#submit').click();
            }
        });

        $('#password').bind("keyup", function (event) {
            if (event.keyCode == 13) {
                $('#submit').click();
            }
        });




    });
</script>


</body>
</html>
